text {
  font-size: 26rpx;
  text-align: center;
}

.calendar-component {
  border-top: 1rpx solid #E2E2E2;
  background-color: #fff;

  view {
    box-sizing: content-box;
  }
}

.calendar-header {
  font-size: 30rpx;
  color: #fff;
  --backgroundColor:#FF9F00;
}

.date-day {
  display: flex;
  padding: 11rpx 0 6rpx 0;
  text-align: center;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  border-bottom: 1rpx solid rgba(226, 226, 226, 1);
  color: #333;
  font-size: 26rpx;

  &:not(:nth-child(7n)) {
    border-right: 1rpx solid rgba(226, 226, 226, 1);
  }

  &.bgitem {
    background-color: #d8ecf9;
  }

  &.active {
    color: #fff;

    .amount,
    .stock,
    .total-stock {
      color: #fff;
    }
  }

  &.unavailable {
    color: #999;

    .total-stock,
    .stock {
      color: #999;
    }
  }
}

.date-week {
  display: flex;
  justify-content: center;
  align-content: center;
  margin: 5px;
  font-weight: bold;
}

.row {
  display: flex;
  flex-direction: row;
}

.item-days {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 35rpx;

  text:first-child {
    margin-bottom: 6rpx;
  }
}

.amount {
  font-size: 20rpx;
  color: #666666;
}

.stock {
  font-size: 20rpx;
}

.total-stock {
  color: #666;
  font-size: 20rpx;
}

.bgwhite {
  background-color: #fff;
}

.date-year-month {
  text-align: center;
  height: 100rpx;
  line-height: 100rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28rpx;
  color: #333;
  position: relative;

  text {
    margin: 0 auto;
  }

  image {
    width: 48rpx;
    height: 48rpx;
    margin: 0 30rpx;
  }
}